<template>
	<text v-if="props.isCh" class="gy-price-text" :style="{fontSize: props.size + 'rpx', color: props.color}">
		{{ props.price? (props.price == 0 ?"免费":props.price.toFixed(2)) : "0" }}
	</text>
	<text v-else class="gy-price-text" :class="{'is-overdue': props.overdue}" :style="{fontSize: props.size + 'rpx', color: props.color}">
		{{props.price?props.price.toFixed(2):'0'}}
	</text>
</template>

<script lang="ts" setup>
	const props = defineProps({
		price: {
			type: [Number, String]
		},
		size: {
			type: Number,
			default: 32
		},
		color: {
			type: String,
			default: "#F64E32"
		},
		isCh: {
			type: Boolean,
			default: true
		},
		overdue: {
			type: Boolean,
			default: false
		}
	});
</script>

<style lang="scss" scoped>
	.gy-price-text {
		position: relative;
		font-weight: bold;
		padding-left: 0.5em;
		font-family: Swis721 Cn BT;
	}

	.gy-price-text::before {
		content: "¥";
		position: absolute;
		left: 0;
		bottom: 0.5em;
		font-size: 0.7em;
		line-height: 0.7em;
	}

	.is-overdue {
		text-decoration: line-through !important;
		color: var(--gy-text-color-secondary) !important;
	}
</style>